{% extends 'teachers/base.html' %}

{% block teachers_index %}
    <div class="row">
        {#        菜单栏#}
        <div class="col-md-3">
            <div class="accordion" id="accordionPanelsStayOpenExample">
                <div class="accordion-item">
                    {#          课程名      #}
                    <br>

                    <h4 class="accordion-header text-center" id="flush-headingOne">&emsp;{{ cource.name }} </h4>
                    {% for i in chapter %}
                        <h2 class="accordion-header" id="panelsStayOpen-headingForChapter{{ i.id }}">
                            <button class="accordion-button {% if section_id.name_id != i.id %}collapsed {% endif %}  "
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseForChapter{{ i.id }}"
                                    aria-expanded="false" aria-controls="panelsStayOpen-collapseForChapter{{ i.id }}">
                                {{ i.chapter }}
                            </button>
                        </h2>
                        <div id="panelsStayOpen-collapseForChapter{{ i.id }}"
                             class="accordion-collapse collapse {% if section_id.name_id == i.id %} show {% endif %}"
                             aria-labelledby="panelsStayOpen-headingForChapter{{ i.id }}">
                            <div class="accordion-body">
                                <ul class="list-group" style="font-size: 10pt">
                                    {% for j in section %}
                                        {% if j.name_id == i.id %}
                                            <a href="{% url 'cource_edit' id %}?section={{ j.id }}"
                                               class="list-group-item  {% if section_id.id == j.id %} active {% endif %} ">
                                            &emsp;

                                            {#   —————————————————— 节  ————————————#}
                                            {{ j.section }}



                                        {% endif %} </a>


                                    {% endfor %}

                                    <div class="accordion  " id="accordionPanelsStayOpenExample"
                                         style="background-color: #bebebf">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="flush-headingSectionAdd">
                                                <button class="btn btn-sm btn-primary collapsed  form-control"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#flush-collapseSectionAdd{{ i.id }}"
                                                        aria-expanded="false"
                                                        aria-controls="flush-collapseSectionAdd">
                                                    ＋ 添加新一节
                                                </button>
                                            </h2>
                                            <div id="flush-collapseSectionAdd{{ i.id }}"
                                                 class="accordion-collapse collapse"
                                                 aria-labelledby="flush-headingSectionAdd"
                                                 data-bs-parent="#accordionFlushExample"
                                                 style="background-color: #bebebf">
                                                <div class="accordion-body">
                                                    <form action="{% url 'cource_section_add' id i.id %}"
                                                          method="post" enctype="multipart/form-data">
                                                        {% csrf_token %}
                                                        <div class="mb-3">

                                                            <input name="name" type="text"
                                                                   class="form-control form-control-sm"
                                                                   placeholder="输入内容">
                                                        </div>
                                                        <br>
                                                        <select name="type" required class="form-select form-select-sm"
                                                                aria-label="Default select example">
                                                            <option selected>上传资源类型</option>
                                                            <option value="1">PDF</option>
                                                            <option value="2">视频</option>
{#                                                            <option value="3" >Word</option>#}
{#                                                            <option value="4">PowerPoint</option>#}
{#                                                            <option value="5">小题</option>#}

                                                        </select>
                                                        <br>
                                                        <input required type="file" class="form-control form-control-sm"
                                                               id="inputPassword3" name="file">
                                                        <br>
                                                        <button type="submit"
                                                                class="btn btn-sm btn-primary form-control">确定
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    {#            删除章和编辑章                    #}
                                    <p>
                                        <a class="btn btn-sm btn-primary float-start w-50" data-bs-toggle="collapse"
                                           href="#collapseExample"
                                           role="button" aria-expanded="false" aria-controls="collapseExample">
                                            编辑章
                                        </a>
                                        <button onclick="if(confirm('确定删除吗？')==false)return false;location.href=('{% url 'cource_chapter_del' id i.id %}')"
                                                class="btn btn-sm btn-danger w-50">删除当前章
                                        </button>

                                    </p>
                                    <div class="collapse" id="collapseExample">
                                        <div class="card card-body" style="background-color: #bebebf">
                                            <form action="{% url 'cource_chapter_edit' id i.id %}" method="post">
                                                {% csrf_token %}
                                                <input name="name" class="form-control" type="text"
                                                       value="{{ i.chapter }}">
                                                <br>
                                                <button type="submit" class="form-control btn btn-sm btn-primary">确定
                                                </button>
                                            </form>
                                        </div>
                                    </div>


                                </ul>
                            </div>
                        </div>
                    {% endfor %}

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingChapterAdd">
                            <button class="btn btn-primary collapsed  form-control" type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#flush-collapseChapterAdd" aria-expanded="false"
                                    aria-controls="flush-collapseChapterAdd">
                                ＋ 添加新一章
                            </button>
                        </h2>
                        <div id="flush-collapseChapterAdd" class="accordion-collapse collapse"
                             aria-labelledby="flush-headingChapterAdd" data-bs-parent="#accordionFlushExample"
                             style="background-color: #bebebf">
                            <div class="accordion-body">
                                <form action="{% url 'cource_chapter_add' id %}" method="post">
                                    {% csrf_token %}
                                    <div class="mb-3">
                                        <input name="name" type="text" class="form-control" placeholder="输入内容">
                                    </div>
                                    <button type="submit" class="btn btn-sm btn-primary form-control">确定</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {#        菜单栏结尾 #}
        {#     ————————————————————————————   内容   ————————————————————————————#}

        <div class="col-md-9">


            {% if section_id.media.type == 1 %}
                <div class="col-md text-center ">
                    <p>

                        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseExample_section_edit" aria-expanded="false"
                                aria-controls="collapseExample">
                            修改内容和资源
                        </button>
                        <button onclick="if(confirm('确定删除吗？')==false)return false;location.href=('{% url 'cource_section_del' id section_id.name_id section_id.id %}')"
                                class="btn-sm btn btn-danger" href="">删除当前节
                        </button>
                    </p>
                    <div class="collapse" id="collapseExample_section_edit">

                        <div class="card card-body col-md-8 offset-2">
                            <form action="{% url 'cource_section_edit' id section_id.name.id section_id.id %}"
                                  method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="staticEmail" class="col-sm-2 col-form-label">节名</label>
                                    <input name="name" type="text"
                                           class="form-control form-control-sm"
                                           placeholder="输入内容"
                                           value="{{ section_id.section }}">
                                </div>
                                <label for="staticEmail" class="col-sm-2 col-form-label">资源类型</label>
                                <select aria-required="true" name="type" required class="form-select form-select-sm"
                                        aria-label="Default select example">
                                    <option selected>上传资源类型</option>
                                    <option value="1">PDF</option>
                                    <option value="2">视频</option>

                                </select>

                                <label for="staticEmail" class="col-sm-2 col-form-label">资源文件</label>
                                <input required type="file" class="form-control form-control-sm"
                                       id="inputPassword3" name="file">
                                <br>
                                <button type="submit"
                                        class="btn btn-sm btn-primary form-control">确定
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
                <div class="col-md-12 ">
                    <iframe style="height: 530px;" src="/static/media/{{ section_id.media.media }}"
                            class="col-md-12"></iframe>
                </div>

                <div class="col-md-12">

                    <br>
                    <h4>&emsp;评论</h4>
                    <hr>


                    {#            ————————————————————————  评论  ————————————————————————    #}
                    <p>
                        <a class="btn btn-primary " data-bs-toggle="collapse" href="#collapseExample"
                           role="button"
                           aria-expanded="false" aria-controls="collapseExample">
                            添加评论
                        </a>
                        <br>
                    </p>
                    <form action="{% url 'cource_section_msg' id section_id.name.id section_id.id %}  "
                          method="get">

                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <div class="row g-3 align-items-center">
                                    <div class="col-auto">
                                        <label for="inputPassword6" class="col-form-label">内容：</label>
                                    </div>

                                    <div class="col">
                                        <input name="msg" type="text" class="form-control"
                                               aria-describedby="passwordHelpInline">
                                    </div>
                                    <div class="col-auto">
                                        <input class="form-control btn-primary" type="submit">
                                    </div>


                                </div>
                            </div>
                        </div>
                    </form>
                    {% for i in message %}

                        <div class="col-md-11" style="background-color: #b4b7d0;margin-top: 2px">
                            <div class="container">
                                <div class="row">
                                    <div class="col-1">
                                        {% load static %}
                                        <img style="border-radius: 50%;margin-top: 5px" width="60px " height="60px"
                                             src="/static/media/{{ i.user.photo }}" alt="">
                                        <p>{{ i.user }}</p>
                                    </div>
                                    <div class="col-11">
                                        <p style="margin-top: 15px">

                                            {{ i.message }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}


                </div>
            {% elif section_id.media.type == 2 %}
                <div class="col-md text-center ">
                    <p>

                        <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseExample_section_edit" aria-expanded="false"
                                aria-controls="collapseExample">
                            修改内容和资源
                        </button>
                        <button onclick="if(confirm('确定删除吗？')==false)return false;location.href=('{% url 'cource_section_del' id section_id.name_id section_id.id %}')"
                                class="btn-sm btn btn-danger" href="">删除当前节
                        </button>
                    </p>
                    <div class="collapse" id="collapseExample_section_edit">

                        <div class="card card-body col-md-8 offset-2">
                            <form action="{% url 'cource_section_edit' id section_id.name.id section_id.id %}"
                                  method="post" enctype="multipart/form-data">
                                {% csrf_token %}
                                <div class="mb-3">
                                    <label for="staticEmail" class="col-sm-2 col-form-label">节名</label>
                                    <input name="name" type="text"
                                           class="form-control form-control-sm"
                                           placeholder="输入内容"
                                           value="{{ section_id.section }}">
                                </div>
                                <label for="staticEmail" class="col-sm-2 col-form-label">资源类型</label>
                                <select aria-required="true" name="type" required class="form-select form-select-sm"
                                        aria-label="Default select example">
                                    <option selected>上传资源类型</option>
                                    <option value="1">PDF</option>
                                    <option value="2">视频</option>

                                </select>

                                <label for="staticEmail" class="col-sm-2 col-form-label">资源文件</label>
                                <input required type="file" class="form-control form-control-sm"
                                       id="inputPassword3" name="file">
                                <br>
                                <button type="submit"
                                        class="btn btn-sm btn-primary form-control">确定
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
                <video controls src="/static/media/{{ section_id.media.media }}" class="col-md-12 ">
                    <source src="http://www.youname.com/images/123456.ogv"/>
                    <source src="http://www.youname.com/images/123456.ogg"/>
                </video>
                <div class="col-md-11">

                <br>
                <h4>&emsp;评论</h4>
                <hr>


                {#            ————————————————————————  评论  ————————————————————————    #}
                <p>
                    <a class="btn btn-primary " data-bs-toggle="collapse" href="#collapseExample"
                       role="button"
                       aria-expanded="false" aria-controls="collapseExample">
                        添加评论
                    </a>
                    <br>
                </p>
                <form action="{% url 'cource_section_msg' id section_id.name.id section_id.id %}  "
                      method="get">

                    <div class="collapse" id="collapseExample">
                        <div class="card card-body">
                            <div class="row g-3 align-items-center">
                                <div class="col-auto">
                                    <label for="inputPassword6" class="col-form-label">内容：</label>
                                </div>

                                <div class="col">
                                    <input name="msg" type="text" class="form-control"
                                           aria-describedby="passwordHelpInline">
                                </div>
                                <div class="col-auto">
                                    <input class="form-control btn-primary" type="submit">
                                </div>


                            </div>
                        </div>
                    </div>
                </form>
                {% for i in message %}

                    <div class="col-md-12" style="background-color: #b4b7d0;margin-top: 2px">
                        <div class="container">
                            <div class="row">
                                <div class="col-1">
                                    {% load static %}
                                    <img style="border-radius: 50%;margin-top: 5px" width="60px " height="60px"
                                         src="/static/media/{{ i.user.photo }}" alt="">
                                    <p>{{ i.user }}</p>
                                </div>
                                <div class="col-11">
                                    <p style="margin-top: 15px">

                                        {{ i.message }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
            {#-----------------------html视频播放-----------------------------#}
            {% if section_id.media.type == 3 %}
                {% load static %}
                <div class="col-md">
                    <h3>这是word</h3>
                </div>
                <iframe src='https://view.officeapps.live.com/op/view.aspx?src=/static/media/{{ section_id.media.media }}'
                        width='100%' height='100%' frameborder='1'>
                </iframe>
                {{ html }}
                {#                <object data="/static/media/{{ section_id.media.media }}" type=""></object>#}

            {% endif %}
            </div>

        </div>





{% endblock %}